<template>
  <view class="about tn-safe-area-inset-bottom">
    <view class="top-backgroup">
      <image src='https://resource.tuniaokj.com/images/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
    </view>
    <view class="about__wrap" v-if="JSON.stringify(userInfo) != '{}'">
      <!-- 头像用户信息 -->
      <view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
        <view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
          <view class="tn-shadow-blur"  style="width: 180rpx;height: 180rpx;background-size: cover;">
						<image :src="userInfo.avatar" style="width: 180rpx;height: 180rpx;" mode=""></image>
          </view>
        </view>
        <view class="user-info__nick-name kaiti">{{ userInfo.userName }}</view>
      </view>
      
      <view class="tn-margin-left tn-margin-right">
        <!-- 更多信息-->
        <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm">
          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyDCloud">
            <view class="tn-flex tn-flex-col-center">
              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white"> 
                <view class="tn-icon-phone-fill"></view>
              </view>
              <view class="tn-margin-left-sm tn-flex-1">电话：{{userInfo.phone}}</view>
              <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
            </view>
          </tn-list-cell>
          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyGitee">
            <view class="tn-flex tn-flex-col-center">
              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-3 tn-color-white"> 
                <view class="tn-icon-email-fill"></view>
              </view>
              <view class="tn-margin-left-sm tn-flex-1">邮箱：{{userInfo.mail}}</view>
              <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
            </view>
          </tn-list-cell>
          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navPlus">
            <view class="tn-flex tn-flex-col-center">
              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white"> 
                <view class="tn-icon-delete-fill"></view>
              </view>
              <view class="tn-margin-left-sm tn-flex-1">清理缓存</view>
              <view class="tn-margin-left-sm tn-color-red tn-icon-circle-lack"></view>
            </view>
          </tn-list-cell>
          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
            <view class="tn-flex tn-flex-col-center">
              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white"> 
                <view class="tn-icon-set-fill"></view>
              </view>
              <view class="tn-margin-left-sm tn-flex-1">版本更新</view>
              <view class="tn-margin-left-sm tn-color-red tn-icon-loading"></view>
            </view>
          </tn-list-cell>
        </view>
        <!-- 更多信息-->
        <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
          <tn-list-cell :hover="true" :unlined="true" :radius="true" :arrow="true" :fontSize="30" @click="resetUser">
            <button class="tn-flex tn-flex-col-center tn-button--clear-style">
              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-9 tn-color-white"> 
                <view class="tn-icon-write-fill"></view>
              </view>
              <view class="tn-margin-left-sm">修改信息</view>
            </button>
          </tn-list-cell>
          <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="outLogin">
            <button class="tn-flex tn-flex-col-center tn-button--clear-style">
              <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white"> 
                <view class="tn-icon-power"></view>
              </view>
              <view class="tn-margin-left-sm" >退出登录</view>
            </button>
          </tn-list-cell>
        </view>
      </view>
    </view>
    <view class="tn-padding-bottom-xs"></view>
		<view class="about__wrap" v-if="JSON.stringify(userInfo) == '{}'">
			<!-- 头像用户信息 -->
			<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
			  <view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
			    <view class="tn-shadow-blur"  style="width: 180rpx;height: 180rpx;background-size: cover;">
						<text class="tn-icon-my-formal"></text>
			    </view>
			  </view>
			  <view class="user-info__nick-name kaiti" @click="openLogin">登录/注册</view>
			</view>
		</view>
  </view>
</template>

<script>
  export default {
    name: 'Tuniao',
		props:['tab'],
    data() {
      return {
        userInfo:{
					// avatar: "http://www.lihynotes.cn:81/upload/2d7602a46764a909eccf22600.jpg",
					// id: 2,
					// isBlogger: "1",
					// mail: "834654733@qq.com",
					// passWord: "$2a$10$lkxGuEAF2lQIqSxGB7q2y.fQVIIjqpI7JGCn0xPQb.Wp6uUdasyYK",
					// phone: "18622792327",
					// userName: "法外狂徒张三",
				}
      }
    },
		mounted() {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					this.userInfo = value
				}
			} catch (e) {
				// error
			}
		},
		watch:{
			tab(newVal, oldVal){
				if(newVal == 4){
					try {
						const value = uni.getStorageSync('userInfo');
						if (value) {
							this.userInfo = value
						}
					} catch (e) {
						// error
					}
				}
			}
		},
    methods: {
			//跳转登录页面
      openLogin(){
				uni.navigateTo({
					url:'/pages/login/index'
				})
			},
      // 清理缓存
      navPlus() {
        let storageInfo = uni.getStorageInfoSync();
        let size = storageInfo.currentSize;
        
        uni.clearStorageSync();
        
        uni.showToast({
          title: '缓存已清除',
          icon: 'success'
        });
      },
      // 复制插件市场地址
      copyDCloud() {
        uni.setClipboardData({
          data: "https://ext.dcloud.net.cn/publisher?id=356088",
        })
      },
      
      // 复制Gitee地址
      copyGitee() {
        uni.setClipboardData({
          data: "https://gitee.com/TSpecific/tuniao-ui",
        })
      },
			//退出登录
			outLogin(){
				uni.navigateTo({
					url:'/pages/login/index'
				})
				try {
					uni.removeStorageSync('userInfo');
				} catch (e) {
					// error
				}
				
			},
			//修改用户信息
			resetUser(){
				uni.navigateTo({
					url:'/pages/resetuser/index'
				})
			}
    }
  }
</script>

<style lang="scss" scoped>
  /* 顶部背景图 start */
  .top-backgroup {
    height: 450rpx;
    z-index: -1;
  
    .backgroud-image {
      width: 100%;
      height: 667rpx;
      // z-index: -1;
    }
  }
  /* 顶部背景图 end */
  
  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .about {
    
    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 0rpx;
      margin-top: -180rpx;
    }
  }
  /* 页面 end*/
  
  /* 用户信息 start */
  .user-info {
    &__container {
      
    }
    
    &__avatar {
      width: 180rpx;
      height: 180rpx;
      border: 8rpx solid rgba(255,255,255,0.05);
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    }
    
    &__nick-name {
      margin-top: 26rpx;
      font-size: 42rpx;
      font-weight: 600;
      text-align: center;
    }
  }
  /* 用户信息 end */
  
  /* 信息展示 start */
  .tn-info {
    
    &__container {
      margin-top: 0rpx;
    }
    
    &__item {
      width: 48%;
      margin: 15rpx 0rpx;
      padding: 28rpx;
      border-radius: 15rpx;
      

        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/6.png);
        }
      
      &__left {
        
        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          font-size: 40rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
          }
        }
        
        &__content {
          font-size: 30rpx;
          
          &--data {
            margin-top: 5rpx;
            font-weight: bold;
          }
        }
      }
      
      &__right {
        &--icon {
          font-size: 60rpx;
          opacity: 0.15;
        }
      }
    }
  }
  /* 信息展示 end */
  
  /* 图标容器5 start */
    .icon5 {
      &__item {
        // width: 30%;
        background-color: #FFFFFF;
        border-radius: 10rpx;
        padding: 0rpx;
        margin: 0rpx;
        transform: scale(1);
        transition: transform 0.3s linear;
        transform-origin: center center;
        
        &--icon {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-bottom: 18rpx;
          position: relative;
          z-index: 1;
        }
      }
    }
    
  .icon20 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 28rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
    /* 图标容器1 end */
    
    /* 胶囊banner*/
    .image-capsule{
      padding: 100rpx 0rpx;
      font-size: 40rpx;
      font-weight: 300;
      position: relative;
    }
    .image-piccapsule{
      background-size: cover;
      background-repeat:no-repeat;
      // background-attachment:fixed;
      background-position:top;
      border-radius: 20rpx 20rpx 0 0;
    }
</style>
